<template>
  <div
    id="chart"
    style="height: 100%;"
  >
  </div>
</template>

<script>

export default {
  name: 'Chart',
  props: {
    chartData: {
      type: Object
    }
  },
  data () {
    return {
      chart: null,
      timer: null,
      activeIndex: 0
    }
  },
  mounted () {
    this.chart = this.$echarts.init(document.getElementById('chart'))
    this.chart.setOption(this.options())
    window.addEventListener('resize', this.chart.resize)
    this.setChartAnimate()
  },
  beforeDestroy () {
    this.clearTimer()
  },
  methods: {
    setChartAnimate () {
      this.clearTimer()
      this.showChartTooltip()
      if (this.activeIndex + 1 >= 13) {
        this.activeIndex = 0
      } else {
        this.activeIndex++
      }
      this.timer = setTimeout(() => {
        this.setChartAnimate()
      }, 1000)
    },
    showChartTooltip () {
      this.chart.dispatchAction({
        type: 'showTip',
        seriesIndex: 0,
        dataIndex: this.activeIndex
      })
    },
    clearTimer () {
      if (this.timer) {
        clearTimeout(this.timer)
        this.timer = null
      }
    },
    options () {
      return {
        title: {
          text: '',
          textStyle: {
            align: 'center',
            color: '#fff',
            fontSize: 20
          },
          top: '3%',
          left: '10%'
        },
        grid: {
          top: '30%',
          bottom: '10%',
          left: '10%',
          right: '10%',
          height: '60%'
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: [{
          data: ['单驾驶员日均营运时长'],
          top: '5%',
          right: '5%',
          itemWidth: 20,
          itemHeight: 5,
          textStyle: {
            color: '#fff'
          }
        }, {
          data: ['劳动强度指数'],
          top: '10%',
          right: '10%',
          itemWidth: 20,
          itemHeight: 5,
          textStyle: {
            color: '#fff'
          }
        }],
        xAxis: {
          data: [
            '1月',
            '2月',
            '3月',
            '4月',
            '5月',
            '6月',
            '7月',
            '8月',
            '9月',
            '10月',
            '11月',
            '12月'
          ],
          axisTick: {
            show: false,
            inside: true
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: '#fff'
            }
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: '#fff'
            }
          }
        },
        yAxis: [{
          type: 'value',
          name: '',
          nameTextStyle: {
            color: '#ebf8ac'
          },
          splitLine: {
            show: false
          },
          axisTick: {
            show: true,
            inside: true
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: '#fff'
            }
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: '#fff'
            }
          }
        },
        {
          type: 'value',
          name: '',
          nameTextStyle: {
            color: '#ebf8ac'
          },
          position: 'right',
          splitLine: {
            show: false
          },
          axisTick: {
            show: true,
            inside: true,
            textStyle: {
              color: '#fff'
            }
          },
          axisLine: {
            lineStyle: {
              color: '#fff'
            }
          },
          axisLabel: {
            show: true,
            formatter: '{value}',
            textStyle: {
              color: '#fff'
            }
          }
        },
        {
          type: 'value',
          gridIndex: 0,
          min: 50,
          max: 100,
          splitNumber: 8,
          splitLine: {
            show: false
          },
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            show: false
          }
        }
        ],
        series: [{
          name: '劳动强度指数',
          type: 'line',
          yAxisIndex: 1,
          smooth: false,
          showAllSymbol: true,
          symbol: 'circle',
          symbolSize: 10,
          itemStyle: {
            color: '#058cff'
          },
          lineStyle: {
            color: '#058cff'
          },
          data: [4.2, 3.8, 4.8, 3.5, 2.9, 2.8, 3, 5, 5, 4, 2, 3]
        },
        {
          name: '单驾驶员日均营运时长',
          type: 'bar',
          barWidth: 15,
          animation: true,
          itemStyle: {
            normal: {
              color: new this.$echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                offset: 1,
                color: '#0386f2FF'
              },
              {
                offset: 0,
                color: '#4cdefbFF'
              }
              ])
            }
          },
          data: [4.2, 3.8, 4.8, 3.5, 2.9, 2.8, 3, 5, 1, 2, 8, 6]
        }
        ]
      }
    }
  },
  watch: {
    chartData () {
      this.chart.setOption(this.options())
    }
  }
}
</script>
